import React from "react"
import { Card, Button } from "antd"
import ReactECharts from "echarts-for-react"

const { useState } = React

export default function Bar() {
  const [load, setLoad] = useState(true)
  const getOption = () => {
    return {
      title: {
        text: "ECharts 折线图",
      },
      xAxis: {
        // 类目轴
        type: "category",
        // 紧挨边缘
        boundaryGap: false,
        data: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
      },
      yAxis: {
        type: "value", // 竖直轴
        // 脱离0值比例
        scale: true, // 从最小值开始 不从0 开始
      },
      series: [
        {
          name: "销售额",
          type: "line",
          data: [77, 98, 66, 98, 66, 77, 98, 66, 66, 77, 98, 66],
          // 线条风格
          // smooth: true, //折线变得圆滑
          lineStyle: {
            color: "green",
            type: "solid", //dashed dotted solid
          },
          label: {
            show: true, //显示数值
            rotate: 60, //旋转60度
            position: "inside", //标签位置
          },
          // 填充风格
          areaStyle: {
            color: "pink",
          },
          // 堆叠图 多个图形的数据叠加
          stack: "all",
        },
      ],
    }
  }
  return (
    <>
      <Card>
        <Button
          type="primary"
          onClick={() => {
            setLoad(!load)
            setTimeout(() => {
              setLoad(true)
            }, 200)
          }}
        >
          更新
        </Button>
      </Card>
      <Card title="折线图">
        {load ? <ReactECharts option={getOption()} /> : null}
      </Card>
    </>
  )
}
